<template>
	<view class="IndividualCenter por" :style="{padding: `${statusBarHeight*1+24}rpx 24rpx 24rpx`}">
		<!-- 个人信息部分 -->
		<view class="message f-background radius10 margin-bottom-24 text-align">
			<view class="message-img por" :class="{'message-box' : infoData.sex == 1}">
				<image class="width-height100 radius100"
					:src="infoData.imagePhoto? infoData.imagePhoto : '@/static/icon/mo.png'" mode="aspectFill"></image>
				<view class="gender dis size-26 poa">
					<view class="dis-ali man-style" v-if="infoData.sex != 0">
						<text class="iconfont icon-nan color-f"></text>
					</view>
					<view class="dis-ali ms-style" v-else>
						<text class="iconfont icon-nv color-f"></text>
					</view>
				</view>
			</view>
			<view class="font-weight-600 color3 size-36">{{infoData.realName || '-'}}</view>
			<view class="phone color9 size-28">{{infoData.telephone || '-'}}</view>
			<navigator hover-class="none" url="/packageAdmin/all-communities/all-communities?type=1"
				class="size-26 color dis">
				服务小区<text class="iconfont icon-right-1-copy size-26"></text>
			</navigator>
			<view class="center border-top text-align-left" @click="onJumpPage('income')">
				<view class="predict">
					<view class="color9 size-24 dis-ali">
						今日收入 <text class="iconfont icon-right-1-copy size-24 margin-left-10"></text>
					</view>
					<view class="font-weight-600 color3 size-40">
						{{infoData.nowAmount || 0}}<text class="size-24 font-weight-400">元</text>
					</view>
				</view>
				<view class="predict">
					<view class="color9 size-24 dis-ali">
						今日订单<text class="iconfont icon-right-1-copy size-24 margin-left-10"></text>
					</view>
					<view class="font-weight-600 color3 size-40">
						{{infoData.nowNum || 0}}<text class="size-24 font-weight-400">单</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 统计部分 -->
		<view class="statistics f-background radius10 margin-bottom-24">
			<view class="center text-align-left">
				<view class="predict" @click="onJumpPage('security')">
					<view class="color5 size-24 dis-ali margin-bottom-16">
						<view class="article background"></view>
						保证金<text class="color3 iconfont icon-right-1-copy size-24 margin-left-10"></text>
					</view>
					<view class="font-weight-600 color3 size-40">
						{{infoData.cashPledge || 0}}<text class="size-24 font-weight-400">元</text>
					</view>
				</view>
				<view class="predict" @click="onJumpPage('balance')">
					<view class="color5 size-24 dis-ali margin-bottom-16">
						<view class="article background"></view>
						账户余额<text class="color3 iconfont icon-right-1-copy size-24 margin-left-10"></text>
					</view>
					<view class="font-weight-600 color3 size-40">
						{{infoData.allAmount || 0}}<text class="size-24 font-weight-400">元</text>
					</view>
				</view>
			</view>
			<view class="indiv-wai border-top">
				<view class="indiv dis-ali" @click="onJumpPage('security')">
					<text class="iconfont icon-qianwangchongzhi color size-34"></text>
					<text class="color3 size-28">前往充值</text>
				</view>
				<view class="indiv dis-ali" @click="onJumpPage('withdraw')">
					<text class="iconfont icon-lijitixian color size-34"></text>
					<text class="color3 size-28">立即提现</text>
				</view>
			</view>
		</view>
		<!-- 常用工具 -->
		<view class="margin-bottom-24 color3 size-30 font-weight-600">常用工具</view>
		<view class="common f-background radius10 margin-bottom-24 dis-cen">
			<view class="common-nav text-align" @click="onJumpPage('bank')">
				<image class="common-img" src="@/static/icon/yhk.png" mode=""></image>
				<view class="color3 size-24">银行卡</view>
			</view>
			<navigator hover-class="none" url="/packageAdmin/all-communities/all-communities?type=2"
				class="common-nav text-align">
				<image class="common-img" src="@/static/icon/lxtz.png" mode=""></image>
				<view class="color3 size-24">联系团长</view>
			</navigator>
			<view class="common-nav text-align" @click="onJumpPage('contact')">
				<image class="common-img" src="@/static/icon/lxkf.png" mode=""></image>
				<view class="color3 size-24">客服服务</view>
			</view>
			<view class="common-nav text-align" @click="onJumpPage('agreement')">
				<image class="common-img" src="@/static/icon/yhxy.png" mode=""></image>
				<view class="color3 size-24">用户协议</view>
			</view>
		</view>
		<view class="logout poa app-bottom-left width100">
			<u-button type="primary"
				:customStyle="{width: '510rpx',height: '92rpx',margin:'0 auto', borderRadius: '8rpx'}" color="#FFFFFF"
				@click="onLogOutLog">
				<text class="color3 font-weight-600 size-30">退出登录</text>
			</u-button>
			<view class="inset-bottom"></view>
		</view>
	</view>
</template>

<script>
	const url = {
		income: '/pages/income/income', // 收入
		security: '/packageGrid/account/security-deposit', // 保证金充值
		balance: '/packageGrid/account/balance', // 账户余额
		withdraw: '/packageGrid/withdraw/withdraw', // 账户提现
		bank: '/packageGrid/bank-card/bank-card', // 银行卡
		contact: '/packagePerson/contact-us/contact-us', // 客服服务
		agreement: '/packagePerson/user-agreement/user-agreement', // 用户协议
	}
	export default {
		props: {
			statusBarHeight: {
				type: Number,
				default: 0
			},
			infoData: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {}
		},
		mounted() {},
		methods: {
			onJumpPage(name) {
				uni.navigateTo({
					url: url[name]
				});
			},
			// 退出登录
			onLogOutLog() {
				uni.showModal({
					title: '温馨提示',
					content: '确认退出登录吗？',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.removeStorageSync('token');
							uni.removeStorageSync('userInfo');
							uni.reLaunch({
								url: '/packagePerson/logon/logon'
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.IndividualCenter {
		width: 548rpx;
		height: 100vh;
		box-sizing: border-box;
		background: #f6f6f6;

		.radius10 {
			border-radius: 10rpx;
		}

		// 个人信息部分
		.message {
			padding: 10rpx 20rpx 0;

			.message-img {
				width: 132rpx;
				height: 132rpx;
				border-radius: 100rpx;
				box-sizing: border-box;
				border: 2px solid #E95A74;
				margin: 30rpx auto 22rpx;

				.gender {
					width: 100%;
					bottom: -12rpx;

					.iconfont {
						display: block;
						width: 40rpx;
						height: 40rpx;
						border-radius: 100rpx;
						line-height: 40rpx;
						text-align: center;
					}

					.man-style .iconfont {
						background: #3291F2;
					}

					.ms-style .iconfont {
						background: #E95A74;
					}
				}
			}

			.message-box {
				border: 2px solid #3291F2;
			}

			.phone {
				margin: 16rpx 0;
			}

			.center {
				margin-top: 30rpx;

				.predict {
					padding: 32rpx 0 40rpx;

					.color9 {
						margin-bottom: 8rpx;
					}
				}

			}
		}

		.margin-left-10 {
			margin-left: 4rpx;
		}

		.center {
			display: grid;
			grid-template-columns: repeat(2, 50%);
		}

		// 统计部分
		.statistics {
			padding: 0 20rpx;

			.center {
				padding: 32rpx 0 34rpx;
			}

			.article {
				width: 4rpx;
				height: 24rpx;
				margin-right: 10rpx;
			}

			.indiv-wai {
				display: grid;
				grid-template-columns: repeat(2, 50%);
			}

			.indiv {
				padding: 22rpx 0;

				.iconfont {
					margin-right: 10rpx;
				}
			}
		}

		// 常用工具
		.common {
			padding: 0 10rpx;

			.common-img {
				width: 42rpx;
				height: 42rpx;
				margin: 0 auto 30rpx;
			}

			.common-nav {
				padding: 24rpx 0;
			}
		}

		.logout {
			padding: 24rpx 0;
		}
	}
</style>